chore: migrate from styled components to tailwind #89
Conversation
- Also update @kleros/ui-components-library to latest version
❌ Deploy Preview for curate-v2 failed. Why did it fail? →
|
WalkthroughReplaces styled-components and react-modal with Tailwind/className styling, upgrades Changes
Sequence Diagram(s)sequenceDiagram
participant App as App.tsx
participant ThemeProv as ThemeProvider
participant ToggleCtx as ToggleThemeProvider
participant Doc as document.documentElement
participant UI as Component (className-based)
App->>ThemeProv: render <ThemeProvider>{children}
ThemeProv->>ThemeProv: read/write theme to localStorage (default "dark")
ThemeProv->>ToggleCtx: provide [theme, toggleTheme]
ThemeProv->>Doc: add/remove "dark" class
Note right of UI `#bde4d0`: Components now use className/Tailwind utilities via `cn`/clsx
UI->>UI: render using utility classes (no styled-components)
UI->>ThemeProv: on user action -> call toggleTheme()
ThemeProv->>Doc: update "dark" class and persist
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧠 Learnings (1)📓 Common learnings🧬 Code graph analysis (1)web/src/components/RegistryCard/StatusBanner.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
web/src/global.css (1)
60-62: Consider reducing !important usage.The
!importantdeclarations on lines 61 and 147 override library defaults for ReactModal and Toastify. While sometimes necessary for third-party library overrides, consider if these can be achieved through higher CSS specificity instead.If the library CSS is loaded before your global styles, you may be able to increase specificity without
!important:/* Instead of: */ .ReactModal__Overlay { background-color: #1b003fcc !important; } /* Try: */ .ReactModal__Overlay.ReactModal__Overlay { background-color: #1b003fcc; }Also applies to: 145-148
web/src/context/ThemeProvider.tsx (1)
8-8: Improve type safety for theme values.The theme is currently typed as
string, which allows any string value. This should be constrained to the valid theme values for better type safety and developer experience.Apply this diff to add proper typing:
+type Theme = "light" | "dark"; + const ThemeProvider: React.FC<{ children: React.ReactNode; }> = ({ children }) => { - const [theme, setTheme] = useLocalStorage<string>("theme", "dark"); + const [theme, setTheme] = useLocalStorage<Theme>("theme", "dark");
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (11)
web/package.json(2 hunks)web/src/app.tsx(3 hunks)web/src/context/StyledComponentsProvider.tsx(0 hunks)web/src/context/ThemeProvider.tsx(1 hunks)web/src/global.css(1 hunks)web/src/styles/commonStyles.ts(0 hunks)web/src/styles/customScrollbar.ts(0 hunks)web/src/styles/global-style.ts(0 hunks)web/src/styles/landscapeStyle.ts(0 hunks)web/src/styles/themes.ts(0 hunks)web/vite.config.js(2 hunks)
💤 Files with no reviewable changes (6)
- web/src/styles/global-style.ts
- web/src/styles/landscapeStyle.ts
- web/src/styles/themes.ts
- web/src/styles/commonStyles.ts
- web/src/styles/customScrollbar.ts
- web/src/context/StyledComponentsProvider.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (6)
web/vite.config.js (1)
5-5: LGTM! Tailwind v4 Vite integration is correct.The Tailwind CSS integration follows the standard pattern for v4 with Vite using the
@tailwindcss/viteplugin.Also applies to: 32-32
web/src/global.css (1)
1-20: LGTM! Tailwind v4 @theme directive and imports are correctly structured.The global CSS setup follows Tailwind v4 best practices: importing the UI library theme, importing Tailwind, and defining custom design tokens via the
@themedirective. The token definitions are comprehensive and well-organized.web/package.json (2)
78-78: LGTM! Tailwind CSS dependencies are correctly added.Both
tailwindcssand@tailwindcss/viteare on the same version (4.1.16), which ensures consistency. The@tailwindcss/vitepackage is appropriately placed in bothdependenciesanddevDependenciesfor build tooling access.Also applies to: 107-107
73-73: Manually verify component compatibility after Tailwind migration to v3.6.0.The upgrade to v3.6.0 involved a major migration from styled-components to Tailwind CSS. The library was migrated to Tailwind CSS, which includes changes to component styling and theming. Tailwind is already configured in the project (v4.1.16).
The codebase uses 23+ components from the library across 40+ files, including several internal components prefixed with underscore (_TimelineItem1, _IItem1). However, no public changelog documents specific breaking changes and component API modifications for v3.6.0.
Actions required:
- Test all component usages throughout the application (run tests and manual QA)
- Verify visual regressions from CSS token/spacing changes
- Confirm internal components (_TimelineItem1, _IItem1) remain stable and exported in v3
- Check for any prop renames or removed component APIs against the library's Storybook or GitHub repository
web/src/context/ThemeProvider.tsx (1)
10-22: LGTM! Dark mode implementation is correct.The theme toggling logic and the
useEffectthat applies thedarkclass todocument.documentElementcorrectly implements Tailwind's class-based dark mode strategy. The implementation will work seamlessly with Tailwind'sdark:variant.web/src/app.tsx (1)
4-4: LGTM! Theme provider migration is correctly implemented.The migration from
StyledComponentsProviderto the newThemeProvideris clean and correct. Theglobal.cssimport is properly placed early in the file, and theThemeProvidercorrectly wraps the entire application as the outermost provider to ensure theme context is available throughout the component tree.Also applies to: 7-7, 26-26, 59-59
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
web/src/context/Web3Provider.tsx (1)
62-62: Consider adding the brand color to the theme system for maintainability.The hardcoded color
#4D00B4is correct—it matches the primary brand color used throughout SVG assets. However, since the codebase has migrated to Tailwind with a theme system (defined inweb/src/global.css), consider adding this color to the@themeblock for consistency and easier maintenance:/* In web/src/global.css @theme block */ --color-primary: #4D00B4;Then reference it in Web3Provider:
"--w3m-color-mix": "var(--color-primary)",This keeps brand colors centralized and easier to maintain across the codebase. The color itself doesn't need to change between light/dark modes—this is a brand constant, not a theme-dependent color.
web/src/layout/index.tsx (1)
22-22: Consider extracting the hardcoded spacing value.The hardcoded
pt-[70px]value appears to offset the ToastContainer from the header. For better maintainability and theme consistency, consider defining this as a CSS variable or Tailwind theme extension that matches the header height.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/global.d.ts(1 hunks)web/src/context/Web3Provider.tsx(1 hunks)web/src/layout/index.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (2)
web/src/layout/index.tsx (1)
23-23: Consider adding dark mode variant.The background class
bg-klerosUIComponentsLightBackgroundimplies a light theme background. Based on the PR's ThemeProvider that toggles a document-leveldarkclass, consider whether this element needs a corresponding dark mode variant (e.g.,dark:bg-klerosUIComponentsDarkBackground).web/global.d.ts (1)
1-12: LGTM!The removal of styled-components module augmentation is appropriate for the Tailwind migration. The file correctly preserves the necessary ambient declarations for SVG and PNG imports while maintaining proper module structure with the
export {}statement.
There was a problem hiding this comment.
Actionable comments posted: 20
🧹 Nitpick comments (3)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx (1)
45-45: Consider using standard spacing scale instead of arbitrary value.The arbitrary value
mb-[10px]works correctly in Tailwind v4, but using the standard spacing scale improves consistency across the codebase. Since 10px equals 2.5rem (2.5 × 4px), consider usingmb-2.5instead.- <label className="flex justify-between mb-[10px]">{contactLabel}</label> + <label className="flex justify-between mb-2.5">{contactLabel}</label>web/src/layout/Header/Logo.tsx (2)
8-13: Remove unnecessary whitespace literal.The
{" "}on line 9 serves no purpose and can be removed for cleaner code.Apply this diff:
<div className="flex flex-row items-center gap-4"> - {" "} <Link to={"/"}> <CurateLogo className="transition duration-100 max-h-12 w-auto hover:fill-white/75" /> </Link> </div>
10-12: Add accessible label for the logo link.The logo link lacks descriptive text for screen readers. Add an
aria-labelto improve accessibility.Apply this diff:
- <Link to={"/"}> + <Link to={"/"} aria-label="Home"> <CurateLogo className="transition duration-100 max-h-12 w-auto hover:fill-white/75" /> </Link>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
web/src/app.tsx(3 hunks)web/src/components/ConnectWallet/AccountDisplay.tsx(2 hunks)web/src/components/InfoCard.tsx(1 hunks)web/src/components/LightButton.tsx(1 hunks)web/src/components/Overlay.tsx(1 hunks)web/src/components/OverlayPortal.tsx(1 hunks)web/src/context/ThemeProvider.tsx(1 hunks)web/src/global.css(1 hunks)web/src/layout/Header/DesktopHeader.tsx(1 hunks)web/src/layout/Header/Logo.tsx(1 hunks)web/src/layout/Header/index.tsx(1 hunks)web/src/layout/Header/navbar/DappList.tsx(1 hunks)web/src/layout/Header/navbar/Debug.tsx(2 hunks)web/src/layout/Header/navbar/Explore.tsx(2 hunks)web/src/layout/Header/navbar/Menu/Help.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/General.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx(3 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/index.tsx(1 hunks)web/src/layout/Header/navbar/Menu/index.tsx(1 hunks)web/src/layout/Header/navbar/Product.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- web/src/context/ThemeProvider.tsx
- web/src/app.tsx
🧰 Additional context used
🧠 Learnings (8)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2024-11-04T13:31:54.080Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:72-96
Timestamp: 2024-11-04T13:31:54.080Z
Learning: In the React TypeScript component `FormContactDetails` in `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, error handling and user feedback are implemented within the `addUser` and `updateEmail` functions, which display toasts to the user.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsxweb/src/layout/Header/navbar/Menu/Settings/index.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:41:31.226Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:126-126
Timestamp: 2024-11-04T13:41:31.226Z
Learning: In `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, the `isUndefined` function effectively handles `null` or `undefined` values. Therefore, using the non-null assertion `!` on `user?.emailUpdateableAt` when calling `timeLeftUntil(user?.emailUpdateableAt!)` is acceptable, as potential `null` or `undefined` cases are already managed.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:33:39.755Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/pages/Settings/index.tsx:18-26
Timestamp: 2024-11-04T13:33:39.755Z
Learning: In `web/src/pages/Settings/index.tsx`, the parent route handles the default `/settings` route, error boundaries, and loading states, so it's not necessary to include them in this component.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx
📚 Learning: 2024-11-04T13:39:19.748Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/updateEmail.ts:21-38
Timestamp: 2024-11-04T13:39:19.748Z
Learning: For the `updateEmail` function in `web/src/utils/atlas/updateEmail.ts`, input validation and error handling are performed in the component that utilizes it. Therefore, additional checks within this utility function are unnecessary.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx
📚 Learning: 2024-11-04T13:34:45.425Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/confirmEmail.ts:24-36
Timestamp: 2024-11-04T13:34:45.425Z
Learning: In the `confirmEmail` function in `web/src/utils/atlas/confirmEmail.ts`, input validation for the address is performed in the calling component, and additional checks are done in the API call itself. Input validation does not need to be repeated in this function.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx
📚 Learning: 2024-11-04T13:29:55.971Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/context/AtlasProvider.tsx:176-193
Timestamp: 2024-11-04T13:29:55.971Z
Learning: In the `web/src/context/AtlasProvider.tsx` file of the React application, the `authoriseUser` function handles session invalidation and delegates error handling and user notifications to the functions that invoke it. Therefore, adding error notifications within `authoriseUser` is unnecessary.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2025-10-24T21:25:59.174Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/global.css
🧬 Code graph analysis (5)
web/src/layout/Header/navbar/Debug.tsx (1)
web/src/consts/index.ts (2)
RELEASE_VERSION(12-12)GIT_URL(11-11)
web/src/layout/Header/navbar/Menu/Settings/General.tsx (2)
web/src/components/EnsureChain.tsx (1)
EnsureChain(10-14)web/src/components/ConnectWallet/AccountDisplay.tsx (3)
IdenticonOrAvatar(16-34)AddressOrName(40-50)ChainDisplay(52-56)
web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx (2)
web/src/layout/Header/navbar/index.tsx (1)
ISettings(54-56)web/src/components/EnsureChain.tsx (1)
EnsureChain(10-14)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx (1)
web/src/utils/date.ts (1)
timeLeftUntil(43-69)
web/src/layout/Header/index.tsx (1)
web/src/utils/getGraphqlUrl.ts (1)
getGraphqlUrl(3-7)
🔇 Additional comments (12)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx (1)
45-52: Migration looks clean, but verify label-input association for accessibility.The migration from styled-components to Tailwind classes is well-executed. However, the
<label>on line 45 lacks ahtmlForattribute to associate it with the input field. If theFieldcomponent renders an input element, ensure proper label-input association for accessibility.Consider adding a
htmlForattribute if the Field component exposes an id:- <label className="flex justify-between mb-[10px]">{contactLabel}</label> + <label htmlFor="contact-input" className="flex justify-between mb-[10px]">{contactLabel}</label> <Field className="flex flex-col items-center w-full" + id="contact-input" variant={fieldVariant}Alternatively, if the
Fieldcomponent from@kleros/ui-components-libraryhandles accessibility internally or doesn't support id props, you may disregard this suggestion.web/src/layout/Header/navbar/DappList.tsx (1)
98-98: LGTM!The h1 header uses standard Tailwind utility classes correctly.
web/src/layout/Header/navbar/Menu/Help.tsx (1)
52-53: The breakpoint is already properly configured—no action needed.The custom
landscape-900:breakpoint is correctly defined inweb/src/global.cssusing Tailwind v4's@themeblock with the--breakpoint-landscape-900: 900px;variable, which automatically creates the responsive modifier. The review comment incorrectly assumes traditional Tailwind configuration (JS/TS config file), which is not applicable to Tailwind v4's CSS-first approach. The code at lines 52-53 in Help.tsx correctly uses this pre-configured breakpoint.Likely an incorrect or invalid review comment.
web/src/layout/Header/navbar/Debug.tsx (1)
5-20: LGTM!The migration from styled-components to className-based styling is implemented correctly. The arbitrary font-family syntax
font-[Roboto_Mono,monospace]is proper Tailwind v4 usage.web/src/components/Overlay.tsx (1)
1-5: LGTM!Clean conversion from styled-component to a functional component with Tailwind classes. The
bg-black-low-opacitycustom color should be defined in your theme configuration.web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx (1)
36-49: LGTM!Successful migration from styled-components to utility classes. The SVG fill and layout classes are properly applied.
web/src/global.css (2)
1-67: Well-structured Tailwind v4 integration.The global stylesheet properly:
- Imports the UI library theme and Tailwind v4 using the new
@importsyntax- Defines custom theme tokens via
@themedirective- Implements accessible focus management with
:focus-visible(addressing the previous review concern)The focus styling (lines 60-67) now correctly preserves keyboard navigation accessibility while removing focus outlines for mouse users.
138-142: Verify browser support for CSS nesting.The nested selector syntax
ul { li { ... } }requires modern browsers. Based on your Tailwind v4 adoption (which targets Chrome 111+, Safari 16.4+, Firefox 128+), this should be supported, but confirm this aligns with your browser compatibility requirements.web/src/layout/Header/index.tsx (1)
12-33: LGTM! Clean migration to Tailwind v4 syntax.The header structure correctly uses Tailwind v4 features including advanced selector syntax for StatusBanner styling and CSS variables for theme integration. The sticky positioning and backdrop blur effects are properly configured.
web/src/layout/Header/navbar/Menu/Settings/General.tsx (1)
20-49: LGTM! Proper use of Tailwind v4 advanced features.The component correctly uses Tailwind v4's advanced selector syntax (
[&>label],[&_label]) and pseudo-element utilities (before:content-['']) to style nested elements. The layout structure is clean and maintains the original functionality.web/src/layout/Header/DesktopHeader.tsx (1)
43-43: LGTM! Correct Tailwind v4 important modifier syntax.The important modifier is correctly placed at the end of the utility class (
fill-white!), which is the proper Tailwind v4 syntax.web/src/layout/Header/navbar/Menu/Settings/Notifications/index.tsx (1)
18-30: LGTM!The migration to Tailwind utilities is well-executed. The flexbox layout structure correctly preserves the component's intended design with proper centering and spacing.
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
Outdated
Show resolved
Hide resolved
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (1)
web/src/components/ConnectWallet/AccountDisplay.tsx (1)
78-80: Fix merged utility class separator.The concatenated strings still miss a trailing space before
landscape-900:hidden, so the output becomesbefore:ml-[3px]landscape-900:hiddenand Tailwind drops both utilities. Add the separator (or switch to a template literal) so each class stays intact.- "before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px]" + + "before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px] " +
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
web/src/components/ConnectWallet/AccountDisplay.tsx(2 hunks)web/src/components/InfoCard.tsx(1 hunks)web/src/components/LightButton.tsx(1 hunks)web/src/global.css(1 hunks)web/src/layout/Header/DesktopHeader.tsx(1 hunks)web/src/layout/Header/Logo.tsx(1 hunks)web/src/layout/Header/navbar/DappList.tsx(1 hunks)web/src/layout/Header/navbar/Explore.tsx(2 hunks)web/src/layout/Header/navbar/Menu/Help.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx(3 hunks)web/src/layout/Header/navbar/Menu/Settings/index.tsx(1 hunks)web/src/layout/Header/navbar/Menu/index.tsx(1 hunks)web/src/layout/Header/navbar/Product.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- web/src/components/InfoCard.tsx
- web/src/layout/Header/navbar/Explore.tsx
- web/src/layout/Header/Logo.tsx
- web/src/components/LightButton.tsx
- web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2025-10-24T21:25:59.174Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/global.css
📚 Learning: 2024-11-04T13:33:39.755Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/pages/Settings/index.tsx:18-26
Timestamp: 2024-11-04T13:33:39.755Z
Learning: In `web/src/pages/Settings/index.tsx`, the parent route handles the default `/settings` route, error boundaries, and loading states, so it's not necessary to include them in this component.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2024-11-04T13:31:54.080Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:72-96
Timestamp: 2024-11-04T13:31:54.080Z
Learning: In the React TypeScript component `FormContactDetails` in `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, error handling and user feedback are implemented within the `addUser` and `updateEmail` functions, which display toasts to the user.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2024-11-04T13:41:31.226Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:126-126
Timestamp: 2024-11-04T13:41:31.226Z
Learning: In `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, the `isUndefined` function effectively handles `null` or `undefined` values. Therefore, using the non-null assertion `!` on `user?.emailUpdateableAt` when calling `timeLeftUntil(user?.emailUpdateableAt!)` is acceptable, as potential `null` or `undefined` cases are already managed.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (2)
web/src/layout/Header/navbar/Menu/Help.tsx (1)
48-69: LGTM! Previous issues resolved.The Tailwind utility classes are now correct, and the className concatenation includes proper spacing.
web/src/layout/Header/navbar/Menu/Settings/index.tsx (1)
39-39: Previous issues resolved.The invalid
width-[calc(...)]utility has been corrected tow-[calc(...)].
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
web/src/layout/Header/navbar/Product.tsx (1)
39-39: Consider removing unnecessaryflexclass.The
<small>element contains only text and usestext-centerfor alignment. Theflexclass appears unnecessary sincetext-centeralone handles text alignment for inline content.- <small className="flex font-normal text-center leading-[19px]">{text}</small> + <small className="font-normal text-center leading-[19px]">{text}</small>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
web/src/components/LightButton.tsx(1 hunks)web/src/layout/Header/navbar/DappList.tsx(1 hunks)web/src/layout/Header/navbar/Explore.tsx(2 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx(3 hunks)web/src/layout/Header/navbar/Menu/Settings/index.tsx(1 hunks)web/src/layout/Header/navbar/Menu/index.tsx(1 hunks)web/src/layout/Header/navbar/Product.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- web/src/layout/Header/navbar/DappList.tsx
- web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
- web/src/components/LightButton.tsx
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2024-11-04T13:33:39.755Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/pages/Settings/index.tsx:18-26
Timestamp: 2024-11-04T13:33:39.755Z
Learning: In `web/src/pages/Settings/index.tsx`, the parent route handles the default `/settings` route, error boundaries, and loading states, so it's not necessary to include them in this component.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2024-11-04T13:31:54.080Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:72-96
Timestamp: 2024-11-04T13:31:54.080Z
Learning: In the React TypeScript component `FormContactDetails` in `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, error handling and user feedback are implemented within the `addUser` and `updateEmail` functions, which display toasts to the user.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2024-11-04T13:41:31.226Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:126-126
Timestamp: 2024-11-04T13:41:31.226Z
Learning: In `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, the `isUndefined` function effectively handles `null` or `undefined` values. Therefore, using the non-null assertion `!` on `user?.emailUpdateableAt` when calling `timeLeftUntil(user?.emailUpdateableAt!)` is acceptable, as potential `null` or `undefined` cases are already managed.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (4)
web/src/layout/Header/navbar/Explore.tsx (2)
17-18: LGTM! Clean active route detection.The
isActivehelper correctly handles both the root path (exact match) and nested routes (first segment comparison), which prevents false positives in navigation highlighting.
36-49: Custom utilities are properly configured—no changes required, but consider adding @source directive.The className structure is correct and all custom utilities are properly defined in your Tailwind v4 setup:
text-klerosUIComponentsPrimaryText,text-primary-text-73,text-white-73are configured via CSS variables in the@themeblocklandscape-900:breakpoint is defined as--breakpoint-landscape-900: 900px- All utilities are actively used and functional throughout the codebase
Based on the learning context, consider adding the
@sourcedirective inweb/src/global.cssto explicitly tell Tailwind to scan the@kleros/ui-components-libraryfor utility classes:@source "../node_modules/@kleros/ui-components-library"; @import "@kleros/ui-components-library/theme.css"; @import "tailwindcss";This ensures Tailwind can generate utilities from CSS variables in the external library, though the current setup appears to be working without it.
web/src/layout/Header/navbar/Product.tsx (1)
16-25: Previous critical issues successfully resolved!All three issues from the previous review have been properly addressed:
- ✅ Security:
rel="noopener noreferrer"added- ✅ Styling: className construction fixed and dynamic width moved to style prop
- ✅ This segment demonstrates proper Tailwind v4 migration pattern
web/src/layout/Header/navbar/Menu/index.tsx (1)
37-37: Clean responsive layout structure.The flex layout with responsive breakpoint is well-structured for converting the menu from vertical to horizontal orientation.
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/layout/Header/navbar/index.tsx (1)
2-2: Remove unused styled-components import.The
styledimport is no longer used after migrating to Tailwind utility classes.Apply this diff to remove the unused import:
-import styled from "styled-components";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/src/layout/Header/MobileHeader.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx(2 hunks)web/src/layout/Header/navbar/index.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
🧬 Code graph analysis (1)
web/src/layout/Header/navbar/index.tsx (1)
web/src/layout/Header/navbar/Menu/Settings/General.tsx (1)
DisconnectWalletButton(7-10)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (2)
web/src/layout/Header/navbar/index.tsx (1)
59-66: LGTM! Wallet container refactoring is correct.The replacement of styled components with Tailwind flex utilities is appropriate, and the wrapper div for vertical alignment maintains the intended layout.
web/src/layout/Header/MobileHeader.tsx (1)
29-29: Custom breakpoint is properly configured.The
landscape-900breakpoint is defined as a CSS variable inweb/src/global.css(line 21:--breakpoint-landscape-900: 900px;) and is successfully used across the codebase in multiple files (DesktopHeader, DappList, Explore, Menu, Settings, LightButton, AccountDisplay). The consistent usage throughout the project confirms proper Tailwind integration.However, the icon-only button on line 33 lacks accessibility attributes — add
aria-labelortitleto the LightButton sincetext="":<LightButton className="p-0 [&_.button-svg]:mr-0" text="" Icon={HamburgerIcon} onClick={toggleIsOpen} aria-label="Toggle menu" />
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
web/src/layout/Header/navbar/Product.tsx (2)
21-25: Move transition to base state for symmetric hover animations.The
hover:prefix on the transition utility means it only applies during hover, causing smooth scaling on hover-in but instant snap-back on hover-out.Apply this diff to move the transition to the base state:
className={clsx( "flex flex-col items-center pt-4 pb-7 px-2 max-w-[100px] rounded-[3px] gap-2", "cursor-pointer bg-klerosUIComponentsLightBackground hover:bg-light-grey dark:hover:bg-klerosUIComponentsLightGrey", - "hover:transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02]" + "transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02]" )}
30-30: Fix Skeleton height for circular placeholder.The Skeleton uses
height={46}withwidth={48}and thecircleprop, creating an ellipse. The actual icon (line 32) isw-12 h-12(48×48px), so the Skeleton should match.Apply this diff:
- {!isImgLoaded ? <Skeleton width={48} height={46} circle /> : null} + {!isImgLoaded ? <Skeleton width={48} height={48} circle /> : null}
🧹 Nitpick comments (3)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx (1)
80-91: Consider removing commented-out Telegram contact code.This commented block reduces code readability. If Telegram contact support is not planned for the near future, remove it. If it's needed later, consider tracking it in an issue instead.
web/src/layout/Header/navbar/Explore.tsx (2)
36-49: Consider adding aria-current for active links.For better accessibility, active navigation links should include
aria-current="page"to help screen reader users identify the current page.Apply this diff to add the accessibility attribute:
<Link key={text} className={cn( "flex items-center p-2 pl-0 rounded-[7px] lg:py-4 lg:px-2", "no-underline text-base leading-tight", isActive(to) ? "text-klerosUIComponentsPrimaryText lg:text-white" : "text-primary-text-73 lg:text-white-73", isMobileNavbar ? "hover:text-klerosUIComponentsPrimaryText" : "hover:text-white", isMobileNavbar && isActive(to) ? "font-semibold" : "font-normal" )} + aria-current={isActive(to) ? "page" : undefined} onClick={toggleIsOpen} {...{ to }} >
46-46: Simplify prop spreading.The syntax
{...{ to }}is unconventional. Consider using the more directto={to}for clarity.Apply this diff to simplify:
onClick={toggleIsOpen} - {...{ to }} + to={to} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
web/src/components/EnsureAuth.tsx(1 hunks)web/src/layout/Header/navbar/Explore.tsx(3 hunks)web/src/layout/Header/navbar/Menu/Settings/General.tsx(2 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx(2 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx(2 hunks)web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx(3 hunks)web/src/layout/Header/navbar/Menu/Settings/index.tsx(2 hunks)web/src/layout/Header/navbar/Menu/index.tsx(1 hunks)web/src/layout/Header/navbar/Product.tsx(2 hunks)web/src/layout/Header/navbar/index.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- web/src/layout/Header/navbar/index.tsx
- web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx
🧰 Additional context used
🧠 Learnings (11)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2024-11-04T13:33:39.755Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/pages/Settings/index.tsx:18-26
Timestamp: 2024-11-04T13:33:39.755Z
Learning: In `web/src/pages/Settings/index.tsx`, the parent route handles the default `/settings` route, error boundaries, and loading states, so it's not necessary to include them in this component.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2024-11-04T13:31:54.080Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:72-96
Timestamp: 2024-11-04T13:31:54.080Z
Learning: In the React TypeScript component `FormContactDetails` in `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, error handling and user feedback are implemented within the `addUser` and `updateEmail` functions, which display toasts to the user.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2025-10-31T20:37:01.310Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/components/OverlayPortal.tsx:5-8
Timestamp: 2025-10-31T20:37:01.310Z
Learning: In Tailwind CSS v4, the `z-<number>` syntax directly sets `z-index: <number>;` for any numeric value (e.g., `z-9999` results in `z-index: 9999;`). Arbitrary value brackets `z-[<value>]` are not required for numeric z-index values in v4.
```
<!-- [remove_learning]
dcbe3a95-44f6-47d5-806e-64b74d549e4b
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsx
📚 Learning: 2025-10-24T21:25:59.174Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/index.tsxweb/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2024-11-04T13:41:31.226Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:126-126
Timestamp: 2024-11-04T13:41:31.226Z
Learning: In `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, the `isUndefined` function effectively handles `null` or `undefined` values. Therefore, using the non-null assertion `!` on `user?.emailUpdateableAt` when calling `timeLeftUntil(user?.emailUpdateableAt!)` is acceptable, as potential `null` or `undefined` cases are already managed.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsxweb/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:39:19.748Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/updateEmail.ts:21-38
Timestamp: 2024-11-04T13:39:19.748Z
Learning: For the `updateEmail` function in `web/src/utils/atlas/updateEmail.ts`, input validation and error handling are performed in the component that utilizes it. Therefore, additional checks within this utility function are unnecessary.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
📚 Learning: 2025-10-31T19:54:12.499Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/Header/DesktopHeader.tsx:43-44
Timestamp: 2025-10-31T19:54:12.499Z
Learning: In Tailwind CSS v4, the important modifier uses a trailing `!` after the utility class (e.g., `fill-white!`), unlike v3 which used a leading `!` prefix (e.g., `!fill-white`). This applies to all utilities including arbitrary values and after variants (e.g., `sm:hover:bg-green-500!`).
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-11-06T23:06:51.514Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/global.css:3-3
Timestamp: 2025-11-06T23:06:51.514Z
Learning: In Tailwind v4, you can use `import "tailwindcss" source("path")` syntax to control automatic content detection by passing the source() argument directly on the import statement. This is in addition to the standalone `source "path"` directive. Both syntaxes are valid: `import "tailwindcss" source("../../node_modules/kleros/ui-components-library");` and `source "../../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2024-11-04T13:41:01.846Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx:67-80
Timestamp: 2024-11-04T13:41:01.846Z
Learning: In React components, when a button is used within a form, calling `e.preventDefault()` in the event handler is necessary to prevent the default form submission, even when using an `onClick` handler.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
📚 Learning: 2024-11-04T13:29:55.971Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/context/AtlasProvider.tsx:176-193
Timestamp: 2024-11-04T13:29:55.971Z
Learning: In the `web/src/context/AtlasProvider.tsx` file of the React application, the `authoriseUser` function handles session invalidation and delegates error handling and user notifications to the functions that invoke it. Therefore, adding error notifications within `authoriseUser` is unnecessary.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
🧬 Code graph analysis (3)
web/src/layout/Header/navbar/Menu/Settings/General.tsx (2)
web/src/components/EnsureChain.tsx (1)
EnsureChain(10-14)web/src/components/ConnectWallet/AccountDisplay.tsx (3)
IdenticonOrAvatar(17-35)AddressOrName(41-51)ChainDisplay(53-57)
web/src/layout/Header/navbar/Explore.tsx (1)
web/src/utils/index.ts (1)
cn(44-46)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx (1)
web/src/utils/date.ts (1)
timeLeftUntil(43-69)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (14)
web/src/components/EnsureAuth.tsx (1)
33-33: LGTM! Button prop updated for library v3 compatibility.The prop rename from
disabledtoisDisabledcorrectly aligns with the upgraded@kleros/ui-components-libraryv3 API while preserving the same disable logic.web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx (1)
41-47: LGTM! Clean migration to Tailwind utilities.The TextField implementation correctly uses Tailwind classes and the simplified onChange handler appropriately passes the value directly to
setContactInput. The arbitrary variant[&_input]:text-smis valid Tailwind syntax for styling descendant input elements.web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx (3)
75-79: LGTM! Critical form submission issue resolved.The form element has been correctly restored with the
onSubmithandler, fixing the previously flagged critical issue. The form will now properly handle submission both on Enter key press and button click.
92-103: LGTM!Clean wrapper implementation with appropriate Tailwind classes.
110-118: LGTM! Button submit functionality properly configured.The Button now has
type="submit"and is wrapped in the correct form element, ensuring proper form submission behavior. The disabled conditions appropriately prevent submission when validation fails or operations are in progress.web/src/layout/Header/navbar/Explore.tsx (4)
6-6: LGTM: Proper utility imports for Tailwind migration.The
cnutility correctly enables conditional class merging, andisUndefinedprovides type-safe checks.
17-18: LGTM: Active route detection logic is correct.The function properly handles exact matching for the home route and segment-based matching for other routes.
38-44: Previous critical issue resolved: className construction is now correct.The use of
cn()properly merges all conditional classes with correct spacing. The logic is clear and maintainable.
39-39: Verify Tailwind configuration and completeness of responsive breakpoint migration.Automated search found no
landscape-900:usage in the codebase and could not locate the Tailwind configuration file to confirm actual breakpoint values (landscape-900 claimed as 900px, lg as 1024px). Before merging, manually verify:
- The Tailwind config location and whether
landscape-900is still defined as a custom breakpoint- The actual pixel value assigned to
lgin your breakpoints configuration- Whether this is the only location requiring migration from
landscape-900:tolg:- Whether the 124px shift in responsive behavior aligns with your design intent
web/src/layout/Header/navbar/Menu/index.tsx (1)
37-37: LGTM: Clean responsive flex container.The outer wrapper correctly uses standard Tailwind utilities for responsive layout direction changes.
web/src/layout/Header/navbar/Menu/Settings/General.tsx (2)
7-10: LGTM: Clean button implementation.The DisconnectWalletButton correctly uses a custom color from the Kleros UI library theme, which is available via the theme.css import.
12-49: LGTM: Well-structured layout with proper Tailwind migration.The component structure successfully migrates from styled-components to Tailwind utilities:
- Proper use of arbitrary selectors like
[&>label]:and[&_label]:for nested element styling- Correct pseudo-element syntax with
before:content-['']for the status indicator- Appropriate nesting and responsive layout classes
- Custom Kleros UI colors are correctly referenced
The migration preserves functionality while adopting Tailwind patterns effectively.
web/src/layout/Header/navbar/Menu/Settings/index.tsx (2)
8-8: Good additions: clsx import and tab IDs.The addition of the
clsximport enables cleaner className composition, and adding explicitidfields to the TABS array provides stable identifiers for tab management and React keys.Also applies to: 12-12, 16-16
31-51: LGTM: Successfully migrated with improved class composition.The Settings component has been successfully migrated from styled-components to Tailwind utilities with several improvements:
- clsx composition (lines 33-37): Cleaner multi-line className organization compared to string concatenation
- Fixed breakpoint usage (line 36): Changed from
landscape-900:to standardlg:prefix, resolving the custom variant configuration issue from previous reviews- Valid z-index (line 34):
z-1is correct in Tailwind v4, which supports direct numeric z-index values- Proper width utilities (line 41): Uses
w-[86vw]andw-[calc(...)]with correctw-prefixAll critical issues from previous reviews have been addressed.
Based on learnings
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
Outdated
Show resolved
Hide resolved
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx (1)
40-50: The hardcoded ID is a latent bug; apply dynamic ID to prevent future duplicates.The label correctly links to the TextField via
htmlFor="contact-input"/id="contact-input", fixing the accessibility concern. However, the codebase shows a latent issue:
- Currently, FormContact renders only once (Email field; Telegram is commented out on lines 80–91).
- The commented code demonstrates the component was designed to support multiple contact fields (Email + Telegram with identical hardcoded IDs).
- When Telegram is uncommented, duplicate IDs will break HTML validation and accessibility.
Apply a dynamic ID to prevent this problem from manifesting:
interface IForm { contactLabel: string; contactPlaceholder: string; contactInput: string; contactIsValid: boolean; setContactInput: Dispatch<SetStateAction<string>>; setContactIsValid: Dispatch<SetStateAction<boolean>>; validator: RegExp; isEditing?: boolean; + fieldId?: string; } const FormContact: React.FC<IForm> = ({ contactLabel, contactPlaceholder, contactInput, contactIsValid, setContactInput, setContactIsValid, validator, isEditing, + fieldId = "contact-input", }) => { return ( <> - <label htmlFor="contact-input" className="flex mb-[10px]"> + <label htmlFor={fieldId} className="mb-[10px]"> {contactLabel} </label> <TextField className="flex flex-col items-center w-full [&_input]:text-sm" - id="contact-input" + id={fieldId} variant={fieldVariant} value={contactInput} onChange={(value) => setContactInput(value)} placeholder={contactPlaceholder} /> </> ); };Then pass unique IDs when calling FormContact (e.g.,
fieldId="contact-email",fieldId="contact-telegram").
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2024-11-04T13:31:54.080Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:72-96
Timestamp: 2024-11-04T13:31:54.080Z
Learning: In the React TypeScript component `FormContactDetails` in `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, error handling and user feedback are implemented within the `addUser` and `updateEmail` functions, which display toasts to the user.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
📚 Learning: 2024-11-04T13:41:31.226Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx:126-126
Timestamp: 2024-11-04T13:41:31.226Z
Learning: In `web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx`, the `isUndefined` function effectively handles `null` or `undefined` values. Therefore, using the non-null assertion `!` on `user?.emailUpdateableAt` when calling `timeLeftUntil(user?.emailUpdateableAt!)` is acceptable, as potential `null` or `undefined` cases are already managed.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
📚 Learning: 2024-11-04T13:39:19.748Z
Learnt from: Harman-singh-waraich
Repo: kleros/curate-v2 PR: 65
File: web/src/utils/atlas/updateEmail.ts:21-38
Timestamp: 2024-11-04T13:39:19.748Z
Learning: For the `updateEmail` function in `web/src/utils/atlas/updateEmail.ts`, input validation and error handling are performed in the component that utilizes it. Therefore, additional checks within this utility function are unnecessary.
Applied to files:
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (1)
web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx (1)
3-3: LGTM! Import aligns with Tailwind migration.The TextField import from
@kleros/ui-components-librarycorrectly replaces styled-components usage as part of the migration objective.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/components/ExternalLink.tsx(0 hunks)web/src/layout/Footer/index.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- web/src/components/ExternalLink.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
🧬 Code graph analysis (1)
web/src/layout/Footer/index.tsx (1)
web/src/consts/socialmedia.tsx (1)
socialmedia(8-33)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (1)
web/src/layout/Footer/index.tsx (1)
27-38: CSS variable configuration is correct—no changes needed.The
global.cssfile already contains the proper Tailwind v4 configuration at line 3:@import "tailwindcss" source("../../node_modules/@kleros/ui-components-library");combined with the theme import at line 1. This setup allows the Footer component to use CSS variable utility classes likebg-klerosUIComponentsPrimaryPurplewithout issues.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/hooks/useToggleThemeContext.tsx(1 hunks)web/src/layout/Header/navbar/Menu/index.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2025-10-24T21:25:59.174Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-10-31T19:54:12.499Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/Header/DesktopHeader.tsx:43-44
Timestamp: 2025-10-31T19:54:12.499Z
Learning: In Tailwind CSS v4, the important modifier uses a trailing `!` after the utility class (e.g., `fill-white!`), unlike v3 which used a leading `!` prefix (e.g., `!fill-white`). This applies to all utilities including arbitrary values and after variants (e.g., `sm:hover:bg-green-500!`).
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-11-06T23:06:51.514Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/global.css:3-3
Timestamp: 2025-11-06T23:06:51.514Z
Learning: In Tailwind v4, you can use `import "tailwindcss" source("path")` syntax to control automatic content detection by passing the source() argument directly on the import statement. This is in addition to the standalone `source "path"` directive. Both syntaxes are valid: `import "tailwindcss" source("../../node_modules/kleros/ui-components-library");` and `source "../../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-11-10T21:52:30.991Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/Header/navbar/Menu/index.tsx:39-44
Timestamp: 2025-11-10T21:52:30.991Z
Learning: In Tailwind CSS v4, the `not-*` variant modifier is built-in and automatically works with any existing variant (e.g., `not-dark:`, `not-lg:`, `not-hover:`). These do not require custom-variant definitions—if the base variant exists (like `dark` or `lg`), the `not-*` negation variant is automatically available.
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-10-31T20:37:01.310Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/components/OverlayPortal.tsx:5-8
Timestamp: 2025-10-31T20:37:01.310Z
Learning: In Tailwind CSS v4, the `z-<number>` syntax directly sets `z-index: <number>;` for any numeric value (e.g., `z-9999` results in `z-index: 9999;`). Arbitrary value brackets `z-[<value>]` are not required for numeric z-index values in v4.
```
<!-- [remove_learning]
dcbe3a95-44f6-47d5-806e-64b74d549e4b
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
🧬 Code graph analysis (1)
web/src/layout/Header/navbar/Menu/index.tsx (2)
web/src/layout/Header/navbar/index.tsx (2)
ISettings(19-21)IHelp(23-25)web/src/hooks/useToggleThemeContext.tsx (1)
useTheme(18-20)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (4)
web/src/hooks/useToggleThemeContext.tsx (1)
18-20: LGTM! Hook rename improves clarity.The rename from
useToggleThemetouseThemeis more concise and aligns with the broader theme management refactor in this PR.web/src/layout/Header/navbar/Menu/index.tsx (3)
8-8: LGTM! Import updated correctly.The import statement correctly uses the renamed
useThemehook.
12-13: LGTM! Hook usage updated correctly.The hook usage correctly reflects the rename, maintaining the same destructuring pattern and theme logic.
37-46: LGTM! Tailwind migration looks solid.The migration from styled-components to Tailwind classes is well-executed. The responsive behavior and theme-aware styling using
not-dark:not-lg:variants and arbitrary selectors like[&_.button-text]are correct based on previous verification (past review comments confirmed custom colors are exposed andnot-*variants work in Tailwind v4).
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/src/layout/Header/navbar/Menu/index.tsx (1)
41-41: Consider extracting complex className for better maintainability.The className string is quite long and contains multiple arbitrary selectors with responsive variants, which can be challenging to maintain.
Consider extracting it to a constant:
+const BUTTON_WRAPPER_CLASSES = + "flex items-center min-h-8 " + + "[&_.button-text]:block lg:[&_.button-text]:hidden " + + "not-dark:not-lg:[&_.button-svg]:fill-black/75 not-dark:not-lg:hover:[&_.button-svg]:fill-black"; + const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsOpen }) => { // ... return ( <div className="flex flex-col lg:flex-row"> {buttons.map(({ text, Icon, onClick }) => ( <div key={text} - className="flex items-center min-h-8 [&_.button-text]:block lg:[&_.button-text]:hidden not-dark:not-lg:[&_.button-svg]:fill-black/75 not-dark:not-lg:hover:[&_.button-svg]:fill-black" + className={BUTTON_WRAPPER_CLASSES} >Alternatively, consider using the
cnutility function if conditional logic is needed in the future.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/src/layout/Header/navbar/Menu/index.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2025-10-24T21:25:59.174Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-10-31T19:54:12.499Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/Header/DesktopHeader.tsx:43-44
Timestamp: 2025-10-31T19:54:12.499Z
Learning: In Tailwind CSS v4, the important modifier uses a trailing `!` after the utility class (e.g., `fill-white!`), unlike v3 which used a leading `!` prefix (e.g., `!fill-white`). This applies to all utilities including arbitrary values and after variants (e.g., `sm:hover:bg-green-500!`).
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-11-06T23:06:51.514Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/global.css:3-3
Timestamp: 2025-11-06T23:06:51.514Z
Learning: In Tailwind v4, you can use `import "tailwindcss" source("path")` syntax to control automatic content detection by passing the source() argument directly on the import statement. This is in addition to the standalone `source "path"` directive. Both syntaxes are valid: `import "tailwindcss" source("../../node_modules/kleros/ui-components-library");` and `source "../../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-11-10T21:52:30.991Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/Header/navbar/Menu/index.tsx:39-44
Timestamp: 2025-11-10T21:52:30.991Z
Learning: In Tailwind CSS v4, the `not-*` variant modifier is built-in and automatically works with any existing variant (e.g., `not-dark:`, `not-lg:`, `not-hover:`). These do not require custom-variant definitions—if the base variant exists (like `dark` or `lg`), the `not-*` negation variant is automatically available.
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
📚 Learning: 2025-10-31T20:37:01.310Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/components/OverlayPortal.tsx:5-8
Timestamp: 2025-10-31T20:37:01.310Z
Learning: In Tailwind CSS v4, the `z-<number>` syntax directly sets `z-index: <number>;` for any numeric value (e.g., `z-9999` results in `z-index: 9999;`). Arbitrary value brackets `z-[<value>]` are not required for numeric z-index values in v4.
```
<!-- [remove_learning]
dcbe3a95-44f6-47d5-806e-64b74d549e4b
Applied to files:
web/src/layout/Header/navbar/Menu/index.tsx
🧬 Code graph analysis (1)
web/src/layout/Header/navbar/Menu/index.tsx (2)
web/src/layout/Header/navbar/index.tsx (2)
ISettings(19-21)IHelp(23-25)web/src/hooks/useToggleThemeContext.tsx (1)
useTheme(18-20)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (1)
web/src/layout/Header/navbar/Menu/index.tsx (1)
37-37: Clean migration to responsive Tailwind layout.The container successfully replaces the styled-component with a straightforward responsive flex layout.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (10)
web/src/pages/Home/Highlights/Header.tsx (1)
1-1: Optional: Simplify static className strings.The
clsxcalls on lines 8-11 and 14-17 only combine static strings without any conditional logic. Consider using plain strings instead to reduce overhead:-import clsx from "clsx"; - import React from "react"; import PaperIcon from "svgs/icons/paper.svg";<div - className={clsx( - "flex justify-center items-center gap-2", - "bg-klerosUIComponentsWhiteBackground border-t-[3px] border-t-klerosUIComponentsSecondaryPurple rounded-t-[3px]" - )} + className="flex justify-center items-center gap-2 bg-klerosUIComponentsWhiteBackground border-t-[3px] border-t-klerosUIComponentsSecondaryPurple rounded-t-[3px]" > <div - className={clsx( - "flex items-center justify-center", - "[&_svg]:h-6 [&_svg]:w-6 [&_svg]:fill-klerosUIComponentsSecondaryPurple" - )} + className="flex items-center justify-center [&_svg]:h-6 [&_svg]:w-6 [&_svg]:fill-klerosUIComponentsSecondaryPurple" >However, if this pattern is used consistently across the codebase for readability or future conditional styling, feel free to keep it as-is.
Also applies to: 8-11, 14-17
web/src/hooks/useIsDesktop.tsx (1)
6-6: Consider extracting the magic number to a named constant.The hardcoded
900replaces the previousBREAKPOINT_LANDSCAPEconstant. While this simplifies the code, it introduces a magic number that makes the breakpoint's purpose less clear and harder to maintain consistently across the codebase.Consider extracting this to a constant at the file or module level:
+const DESKTOP_BREAKPOINT = 900; + const useIsDesktop = () => { const { width } = useWindowSize(); - return useMemo(() => width > 900, [width]); + return useMemo(() => width > DESKTOP_BREAKPOINT, [width]); };Alternatively, if 900px is the standard desktop breakpoint used throughout the migration, add a brief comment:
const useIsDesktop = () => { const { width } = useWindowSize(); + // 900px matches Tailwind's lg breakpoint return useMemo(() => width > 900, [width]); };web/src/pages/Home/Header.tsx (1)
18-18: Consider Tailwind arbitrary values for responsive font sizing.Mixing inline styles with Tailwind classes (line 18) works but creates inconsistency. If
responsiveSizeis used frequently, consider whether Tailwind's arbitrary values or a custom plugin could handle this pattern more consistently.Example using Tailwind arbitrary value (if the calculation can be simplified):
<h1 className="font-medium mb-12 tracking-[1px] text-[clamp(21px,2vw,24px)]">However, if
responsiveSizehas complex logic, the current inline style approach is acceptable.web/src/layout/Header/navbar/Menu/Settings/General.tsx (1)
28-40: Consider simplifying complex arbitrary variant selectors.Lines 28, 33, and 38 use complex Tailwind arbitrary variants (
[&>label],[&_label],before:content-['']) that reduce readability. While functionally correct, these long className strings are harder to maintain.Consider these alternatives:
Option 1: Apply classes directly to child elements instead of using arbitrary variants:
<div className="flex justify-center [&>label]:text-base..."> <a href={addressExplorerLink} ...> <AddressOrName /> {/* Apply classes here if AddressOrName can accept them */} </a> </div>Option 2: Extract to a CSS class using
@layer componentsin global.css:@layer components { .address-display { @apply flex justify-center; & > label { @apply text-base font-semibold text-klerosUIComponentsPrimaryText; } } }Then use:
<div className="address-display">Option 3 (if neither works): Add explanatory comments for complex selectors:
{/* Status indicator with green dot */} <div className="flex h-[34px] gap-2 justify-center items-center before:content-[''] ...">web/src/components/RegistryCard/RegistryInfo.tsx (2)
43-43: Mixing inline styles with Tailwind reduces consistency.Line 43 uses an inline
styleprop forcolumnGapalongside Tailwind classes. This pattern is similar to the issue in Home/Header.tsx and reduces styling consistency.If
responsiveSizeis used frequently for gaps, consider:
- Creating a Tailwind plugin for responsive sizing
- Using CSS custom properties set via inline styles at the component root
- Accepting this pattern if
responsiveSizehas complex logic that doesn't map to Tailwind utilities
66-70: Consider simplifying Button className with component slots.The Button's className uses
[&_.button-text]and[&_.button-svg]arbitrary variants to style internal elements. If@kleros/ui-components-libraryv3 supports component slots or style props, those would be cleaner than arbitrary variants.Check the Button component API for alternatives like:
<Button text="Open" Icon={ArrowIcon} textClassName="text-klerosUIComponentsPrimaryBlue font-normal" iconClassName="fill-klerosUIComponentsSecondaryPurple" />If not supported, the current approach is acceptable but add a comment:
{/* Style Button internals via class selectors */} <Button className={cn(...)} />web/src/pages/Home/index.tsx (1)
16-16: Document or simplify the complex responsive padding calculation.Line 16 uses a complex
calc()expression for responsive padding that's difficult to understand:calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))Consider these approaches:
Option 1: Add a comment explaining the interpolation:
// Responsive padding: 0px @ 375px viewport → 132px @ 1250px viewport "lg:px-[calc(0px+(132-0)*(min(max(100vw,375px),1250px)-375px)/(1250-375))]"Option 2: Extract to a CSS custom property or use Tailwind's arbitrary values more explicitly:
/* In global.css */ @layer utilities { .px-responsive { padding-left: clamp(0px, calc((100vw - 375px) / (1250 - 375) * 132px), 132px); padding-right: clamp(0px, calc((100vw - 375px) / (1250 - 375) * 132px), 132px); } }Option 3: Use Tailwind's standard responsive utilities if the exact interpolation isn't critical:
"lg:px-8 xl:px-32"web/src/pages/Home/Stats/index.tsx (2)
13-13: Consider using thecnutility for consistency.Other migrated components (StatDisplay, StatusBanner) use the
cnutility from~src/utilswhich combinesclsxwithtailwind-merge. This provides better handling of conflicting Tailwind classes.Apply this diff:
-import clsx from "clsx"; +import { cn } from "~src/utils";<Card - className={clsx( + className={cn( "grid grid-cols-[repeat(auto-fit,minmax(190px,1fr))] gap-8", "w-full h-fit mb-16 pb-4! lg:gap-0 lg:pb-0!" )}Also applies to: 73-76
77-80: Consider completing the Tailwind migration for padding.The inline
stylewithresponsiveSizemixes styling approaches. For full Tailwind adoption, consider converting these to Tailwind responsive utilities or CSS custom properties defined in your theme.web/src/components/StatDisplay.tsx (1)
24-31: Consider extracting color mappings for better maintainability.The inline color conditionals are verbose and repetitive. A lookup object would be cleaner and easier to maintain.
+const colorClasses: Record<IColors, string> = { + green: "bg-klerosUIComponentsSuccessLight [&_svg]:fill-klerosUIComponentsSuccess", + blue: "bg-klerosUIComponentsMediumBlue [&_svg]:fill-klerosUIComponentsPrimaryBlue", + purple: "bg-klerosUIComponentsMediumPurple [&_svg]:fill-klerosUIComponentsSecondaryPurple", + orange: "bg-klerosUIComponentsWarningLight [&_svg]:fill-klerosUIComponentsWarning", +}; + const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon, color, ...props }) => { return ( <div ... > <div className={cn( "flex items-center justify-center h-12 w-12 rounded-[50%]", "[&_svg]:h-5 [&_svg]:w-5", - color === "green" && "bg-klerosUIComponentsSuccessLight [&_svg]:fill-klerosUIComponentsSuccess", - color === "blue" && "bg-klerosUIComponentsMediumBlue [&_svg]:fill-klerosUIComponentsPrimaryBlue", - color === "purple" && "bg-klerosUIComponentsMediumPurple [&_svg]:fill-klerosUIComponentsSecondaryPurple", - color === "orange" && "bg-klerosUIComponentsWarningLight [&_svg]:fill-klerosUIComponentsWarning" + colorClasses[color] )} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
web/src/components/HeroImage.tsx(1 hunks)web/src/components/RegistryCard/RegistryInfo.tsx(2 hunks)web/src/components/RegistryCard/StatusBanner.tsx(2 hunks)web/src/components/RegistryCard/index.tsx(1 hunks)web/src/components/StatDisplay.tsx(2 hunks)web/src/components/StyledSkeleton.tsx(1 hunks)web/src/components/TruncatedText.tsx(2 hunks)web/src/global.css(1 hunks)web/src/hooks/useIsDesktop.tsx(1 hunks)web/src/layout/Header/navbar/Menu/Settings/General.tsx(1 hunks)web/src/pages/Home/Header.tsx(1 hunks)web/src/pages/Home/Highlights/Header.tsx(1 hunks)web/src/pages/Home/Highlights/index.tsx(2 hunks)web/src/pages/Home/Stats/index.tsx(2 hunks)web/src/pages/Home/index.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- web/src/pages/Home/Highlights/index.tsx
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
📚 Learning: 2025-10-24T21:25:59.174Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/index.tsx:15-28
Timestamp: 2025-10-24T21:25:59.174Z
Learning: In Tailwind v4, when using CSS variables from external libraries like kleros/ui-components-library, add the `source` directive in global.css to tell Tailwind to scan and generate utility classes from those variables. Example: `source "../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/global.css
📚 Learning: 2025-11-06T23:06:51.514Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/global.css:3-3
Timestamp: 2025-11-06T23:06:51.514Z
Learning: In Tailwind v4, you can use `import "tailwindcss" source("path")` syntax to control automatic content detection by passing the source() argument directly on the import statement. This is in addition to the standalone `source "path"` directive. Both syntaxes are valid: `import "tailwindcss" source("../../node_modules/kleros/ui-components-library");` and `source "../../node_modules/kleros/ui-components-library";`
Applied to files:
web/src/global.css
📚 Learning: 2025-10-31T19:54:12.499Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/layout/Header/DesktopHeader.tsx:43-44
Timestamp: 2025-10-31T19:54:12.499Z
Learning: In Tailwind CSS v4, the important modifier uses a trailing `!` after the utility class (e.g., `fill-white!`), unlike v3 which used a leading `!` prefix (e.g., `!fill-white`). This applies to all utilities including arbitrary values and after variants (e.g., `sm:hover:bg-green-500!`).
Applied to files:
web/src/global.css
📚 Learning: 2025-10-31T20:37:01.310Z
Learnt from: kyrers
Repo: kleros/curate-v2 PR: 89
File: web/src/components/OverlayPortal.tsx:5-8
Timestamp: 2025-10-31T20:37:01.310Z
Learning: In Tailwind CSS v4, the `z-<number>` syntax directly sets `z-index: <number>;` for any numeric value (e.g., `z-9999` results in `z-index: 9999;`). Arbitrary value brackets `z-[<value>]` are not required for numeric z-index values in v4.
```
<!-- [remove_learning]
dcbe3a95-44f6-47d5-806e-64b74d549e4b
Applied to files:
web/src/global.css
🧬 Code graph analysis (6)
web/src/components/HeroImage.tsx (1)
web/src/hooks/useToggleThemeContext.tsx (1)
useTheme(18-20)
web/src/components/RegistryCard/StatusBanner.tsx (1)
web/src/utils/index.ts (1)
cn(44-46)
web/src/components/TruncatedText.tsx (1)
web/src/utils/index.ts (1)
cn(44-46)
web/src/layout/Header/navbar/Menu/Settings/General.tsx (2)
web/src/components/EnsureChain.tsx (1)
EnsureChain(10-14)web/src/components/ConnectWallet/AccountDisplay.tsx (3)
IdenticonOrAvatar(17-35)AddressOrName(41-51)ChainDisplay(53-57)
web/src/components/RegistryCard/RegistryInfo.tsx (3)
web/src/utils/index.ts (1)
cn(44-46)web/src/utils/getIpfsUrl.ts (1)
getIpfsUrl(4-8)web/src/consts/index.ts (1)
DEFAULT_LIST_LOGO(23-23)
web/src/components/StatDisplay.tsx (1)
web/src/utils/index.ts (1)
cn(44-46)
🪛 Biome (2.1.2)
web/src/global.css
[error] 4-4: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - curate-v2
- GitHub Check: Header rules - curate-v2
- GitHub Check: Pages changed - curate-v2
🔇 Additional comments (9)
web/src/pages/Home/Highlights/Header.tsx (1)
7-22: Clean Tailwind migration!The migration from styled-components to Tailwind classes is well-executed:
- Layout utilities (
flex,justify-center,items-center) correctly structured- Custom colors from the UI library properly referenced
- Arbitrary values used appropriately for specific measurements (3px border/radius)
- SVG styling via arbitrary variants (
[&_svg]:) is a good approach for descendant targetingThe component maintains its original functionality and appearance while adopting Tailwind's utility-first approach.
web/src/components/HeroImage.tsx (1)
2-11: LGTM! Theme hook migration is correct.The migration from styled-components'
useTheme()to the customuseTheme()hook is implemented correctly. The hook returns a tuple[theme, toggleTheme], and the theme comparison logic has been appropriately updated.web/src/global.css (2)
1-4: Import order is non-standard but justified.The import sequence (
@import theme.css→@tailwind utilities→@source→@import "tailwindcss") is unusual but aligns with your previous explanation about avoiding duplicate classes when the ui-components-library also imports Tailwind.The Biome error about
@importposition at line 4 is a false positive in this Tailwind v4 context, where the specific order is necessary for your use case.Based on learnings
61-68: LGTM! Focus accessibility properly handled.The
:focus:not(:focus-visible)and:focus-visiblerules correctly preserve keyboard navigation accessibility while removing mouse focus outlines. This addresses the previous critical accessibility concern.web/src/pages/Home/Header.tsx (1)
17-21: Configuration is correct—CSS variable exists and utility class generates properly.The CSS variable
--klerosUIComponentsSecondaryPurpleis confirmed to exist in the theme: it's already used inglobal.cssat lines 145 and 175 asvar(--klerosUIComponentsSecondaryPurple). This confirms both the variable's presence in the library and that the@sourcedirective is scanning it correctly. Similar utility classes (e.g.,text-klerosUIComponentsPrimaryText,border-t-klerosUIComponentsSecondaryPurple,fill-klerosUIComponentsSecondaryPurple) are already successfully generated and used throughout the codebase. The utility classtext-klerosUIComponentsSecondaryPurpleat Header.tsx line 19 will generate correctly.web/src/components/RegistryCard/index.tsx (1)
27-42: LGTM!Clean migration from styled-components to the Card component with appropriate className-based styling. The responsive classes and hover interactions are correctly implemented.
web/src/components/RegistryCard/StatusBanner.tsx (1)
47-47: Verify the pseudo-element targeting syntax works correctly.The
[&_.dot::before]syntax uses Tailwind v4's arbitrary variants to target nested pseudo-elements. Ensure this generates the expected CSS and renders correctly in the browser.web/src/components/StyledSkeleton.tsx (1)
5-30: LGTM!Clean migration from styled-components to Tailwind utility classes. The skeleton components properly use flex layout, responsive sizing, and maintain the expected visual structure.
web/src/components/StatDisplay.tsx (1)
27-30: CSS variable utilities are properly configured.The
@sourcedirective is correctly set up inglobal.css(line 3) to scan@kleros/ui-components-library. Tailwind will automatically generate the utility classes from CSS variables defined in that library.
Resolves #88.
PR-Codex overview
This PR focuses on refactoring the codebase to remove
styled-componentsin favor of utility-first CSS classes, specifically usingTailwind CSS. It also introduces new utility functions and components, enhancing the overall styling and structure of the application.Detailed summary
styled-componentsfiles.styledcomponents with Tailwind CSS utility classes in various components.useIsDesktophook to use a fixed breakpoint instead of a constant.ThemeProviderto manage theme state using local storage.cnfor class name merging.vite.config.jsto includetailwindcssplugin.Web3Providerand other components.Summary by CodeRabbit
Chores
New Features
Refactor
Other